<template>
  <view
    class="page w-full h-[auto] flex items-start justify-start"
    :style="{ paddingTop: useSafeArea.getSafeAreaTop + 20 + 'rpx' }"
  >
    <view class="sidebar relative p-6">
      <view class="decor decor-1"></view>
      <view class="decor decor-2"></view>

      <view
        class="close-btn"
        @click="onClose"
        :style="{ top: useSafeArea.getSafeAreaTop + 60 + 'rpx' }"
      >
        <wd-icon name="close-normal" size="22px" color="#fff"></wd-icon>
      </view>

      <view class="profile mt-6 flex items-center gap-4">
        <view class="avatar-wrapper" @click="onAvatarClick">
          <img
            :src="
              user.avatar ??
              'https://gd-hbimg.huaban.com/4a7855d376f1c638063524f7873dbd8434c990e99b64-ANMZtE_fw658'
            "
            alt="avatar"
            class="avatar"
          />
        </view>
        <view>
          <text class="name">{{ user.nickname ?? '暂无昵称' }}</text>
          <text class="subtitle">{{
            user.role === 1 ? '志愿者' : '用户'
          }}</text>
        </view>
      </view>

      <view class="menu mt-10">
        <view
          v-for="(item, idx) in items"
          :key="idx"
          @click="onItemClick(item.path as string)"
        >
          <view
            class="menu-item flex items-center gap-4 p-3 rounded-l-full cursor-pointer hover:opacity-90"
            v-if="
              item.showCondition === 0 ? true : item.showCondition === user.role
            "
          >
            <view class="icon-box flex items-center justify-center">
              <wd-icon :name="item.icon" size="22px"></wd-icon>
            </view>
            <text class="menu-text">{{ item.text }}</text>
          </view>
        </view>
      </view>

      <view class="absolute bottom-120">
        <view
          class="logout mt-6 flex items-center gap-3 cursor-pointer"
          @click="onLogout"
        >
          <view class="logout-icon flex items-center justify-center">
            <wd-icon name="logout" size="22px" color="#fff"></wd-icon>
          </view>
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineEmits, computed } from 'vue'
import useStore from '@/store'
import { jumpTo } from '@/utils/unifunc'

const { useSafeArea } = useStore()

const user = computed(() => {
  return uni.getStorageSync('user') as UserInfo
})

const emits = defineEmits(['close'])

const items = [
  {
    text: '账号信息',
    icon: 'user',
    path: '/pages/tools/userEdit',
    showCondition: 0
  },
  {
    text: '帮扶记录',
    icon: 'notification-filled',
    path: '/pages/history/orderList',
    showCondition: 0
  },
  {
    text: '设置',
    icon: 'setting1',
    path: '/pages/tools/settingPage',
    showCondition: 0
  },
  {
    text: '志愿证书',
    icon: 'note',
    path: '/pages/tools/certificatePage',
    showCondition: 0
  },
  {
    text: '儿童管理',
    icon: 'usergroup',
    path: '/pages/children/childrenList',
    showCondition: 2
  }
]

function onClose() {
  emits('close')
}

function onLogout() {
  uni.removeStorageSync('user')
  jumpTo('/pages/login/loginPge')
}

function onAvatarClick() {
  jumpTo('/pages/login/loginPge')
}

function onItemClick(path: string) {
  if (path) {
    jumpTo(path)
  }
}
</script>

<style scoped>
:root {
  --bg-a: #3ea0ff;
  --bg-b: #2b77ff;
  --accent: #2b77ff;
  --white: #ffffff;
}

.page {
  background: linear-gradient(180deg, var(--bg-a) 0%, var(--bg-b) 100%);
  min-height: 100vh;
  padding: 0;
}

.sidebar {
  width: min(420px, 92vw);
  min-height: 100vh;
  box-sizing: border-box;
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  position: relative;
  overflow: hidden;
  /* 右侧轻微斜切（类似图片那种向右倾斜） */
  clip-path: polygon(
    0 0,
    calc(100% - 90px) 0,
    100% 12%,
    100% 88%,
    calc(100% - 90px) 100%,
    0 100%
  );
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: inset -30px 0 60px rgba(255, 255, 255, 0.02);
}

.decor {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.12;
}
.decor-1 {
  width: 240px;
  height: 240px;
  right: -80px;
  top: 40px;
  background: rgba(255, 255, 255, 0.18);
}
.decor-2 {
  width: 120px;
  height: 120px;
  right: -40px;
  top: 220px;
  background: rgba(255, 255, 255, 0.08);
}

.close-btn {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
}

/* 头像 */
.avatar-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.06);
}

/* 名称与副标题 */
.name {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
}
.subtitle {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

/* 菜单项 */
.menu-item {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.02)
  );
  transition:
    transform 0.12s ease,
    background 0.12s ease;
}
.menu-item:hover {
  transform: translateX(6px);
  background: rgba(255, 255, 255, 0.04);
}

/* 白色图标圆角方块（和原图一致） */
.icon-box {
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(11, 54, 128, 0.06);
}
.icon-box svg {
  width: 20px;
  height: 20px;
}
.menu-text {
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
}

/* 底部文本 */
.policy-item {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.logout-icon {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logout-text {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

/* 响应式微调 */
@media (max-width: 420px) {
  .sidebar {
    clip-path: polygon(
      0 0,
      calc(100% - 60px) 0,
      100% 12%,
      100% 88%,
      calc(100% - 60px) 100%,
      0 100%
    );
  }
  .avatar-wrapper {
    width: 56px;
    height: 56px;
  }
  .icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}
</style>
